<template>
    <div class='person-center'>
        <div class='person-center-top'>
            <img class='person-center-bg' src="~@/assets/img/person_bg.png" alt="">
            <ul v-if="!showname">
                <div class='person-info-wrap'>
                    <div class='person-info' style="margin-left:75px;">注册/登录</div>
                </div>
            </ul>
            <ul v-else>
                <div class='person-info-wrap'>
                    <img class='person-photo' src="~@/assets/img/default_head.png" alt="">
                    <div class='person-info'>
                        {{userdata.name}}
                        <div class='color-light'>手机号:{{userdata.phone}}</div>
                    </div>
                </div>
            </ul>
        </div>

        <div class='person-center-bottom'>
            <!-- 每条导航信息 -->
            <div class="person-center-item">
                <img class='item-icon' src="~@/assets/img/icon_set.png" alt=""> 就诊卡
                <span class='arrow-right'>></span>
            </div>
            <router-link :to="'/MyForm'">
                <div class="person-center-item">
                    <img class='item-icon' src="~@/assets/img/icon_set.png" alt=""> 预约挂号
                    <span class='arrow-right'>></span>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        data(){
            return{
                showname:true,
                userdata:{phone:'123456789',name:'李999三'}

            }
        },


        methods:{

        }

    }
</script>


<style scoped>
    a{
        text-decoration: none;
    }
    .router-link-active{
        text-emphasis: none;
    }
    .person-center {
        background: #f2f2f2;
        padding-bottom: 30px;
    }
    .person-center .person-center-top {
        position: relative;
    }
    .person-center .person-center-top .person-center-bg {
        width: 100%;
    }
    .person-center .person-center-top .person-info-wrap {
        position: absolute;
        display: flex;
        align-items: center;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
    }
    .person-center .person-center-top .person-info-wrap .person-photo {
        width: 40px;
        margin-right: 15px;
    }
    .person-center .person-center-top .person-info-wrap .person-info {
        color:#fff;
        font-size: 24px;
    }
    .person-center .person-center-top .person-info-wrap .person-info .color-light {
        color:rgba(255, 255, 255,.6);
        font-size: 14px;
    }
    .person-center .person-center-bottom {
        background: #fff;
        margin-top: 15px;
    }
    .person-center .person-center-bottom .person-center-item {
        display: flex;
        position: relative;
        align-items: center;
        margin-bottom: 10px;
        padding: 15px;
        border-bottom: 1px solid #f2f2f2;
    }
    .person-center .person-center-bottom .person-center-item .item-icon {
        width: 20px;
        margin-right: 10px;
    }
    .person-center .person-center-bottom .person-center-item .arrow-right {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%)
    }
    @media screen and (max-width:767px) {
        .person-center .person-center-top .person-info-wrap{
            left: 15px;
        }

    }

</style>
